<template>
  <el-link :underline="false">
    <div class="location-info">{{ city }}</div>
  </el-link>
</template>

<script lang="ts" setup>
import * as AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'

const city = ref('')

const getLocation = async () => {
  // 高德地图
  const AMap = await AMapLoader.load({
    key: 'e2b04289e870b005374ee030148d64fd',
    version: '2.0',
    plugins: ['AMap.CitySearch']
  })
  const citySearch = new AMap.CitySearch()
  citySearch.getLocalCity((status: string, result: any) => {
    if (status === 'complete' && result.info === 'OK') {
      city.value = result.city
    }
  })
}
onMounted(() => {
  getLocation()
})
</script>
<style lang="scss" scoped>
.location-info {
  margin-left: 20px;
}
</style>
